<template>
	<section class="vbox">
		<section class="scrollable padder">
			<section class="panel panel-default m-t-sm">
				<header class="panel-heading">
					用户管理
					<ul class="nav nav-tabs pull-right no-border">
						<li class="m-r-sm m-t-xs">
							<el-input placeholder="输入用户昵称" v-model="keywords" clearable>
								<template #append>
									<el-button slot="append" type="success" icon="icon-magnifier icon" @click="query(1)"></el-button>
								</template>
							</el-input>
						</li>
						<li class="m-r-md m-t-xs">
							<button class="btn btn-success" @click="model={}; dialogFormVisible = true"><i class="fa fa-plus-circle"></i> 新增</button>
						</li>
					</ul>
				</header>
				<div class="panel-body">
					<el-table size="medium" :data="userList" stripe style="width: 100%" border>
						<el-table-column fixed type="index" width="auto" :index="indexMethod">
						</el-table-column>
						<el-table-column prop="username" label="用户名">
						</el-table-column>
						<el-table-column prop="userNick" label="昵称">
						</el-table-column>
						<el-table-column prop="sex" label="性别" :formatter="formatterSex">
						</el-table-column>
						<el-table-column prop="poster" label="头像">
							<template v-slot="scope">
								<img :src="scope.row.poster" />
							</template>
						</el-table-column>
						<el-table-column prop="telephone" label="手机号">
						</el-table-column>
						<el-table-column prop="isEnabled" label="是否可用" width="90" align="center">
							<template v-slot="scope">
								<el-switch v-model="scope.row.isEnabled" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
								 inactive-value="0">
								</el-switch>
							</template>
						</el-table-column>
						<el-table-column prop="isLocked" label="是否锁定" width="90" align="center">
							<template v-slot="scope">
								<el-switch v-model="scope.row.isLocked" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
								 inactive-value="0">
								</el-switch>
							</template>
						</el-table-column>
						<el-table-column prop="lastLoginTime" label="最近登录时间">
						</el-table-column>
						<el-table-column align="center" label="操作">
							<template v-slot="scope">
								<el-button type="text" @click="editUser(scope.row)">编辑</el-button>
								<el-divider direction="vertical"></el-divider>
								<el-button type="text" @click="deleteUser(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

					<pagination :total="total" :pageNo='pageNo' :pageSize='pageSize' @onPageChange="query"></pagination>
				</div>

				<el-dialog :title="model.id==null ? '新增': '编辑'" v-model="dialogFormVisible" top="5vh">
					<form class="form-horizontal" action="#" method="get" onsubmit="return false;">
						<div class="form-group">
							<label class="col-sm-2 control-label">用户名</label>
							<div class="col-sm-10">
								<p v-if="model.id != null" class="form-control-static"> {{ model.username }} </p>
								<span v-else>
									<input type="text" v-model.trim="model.username" class="form-control" required="true">
								</span>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">昵称</label>
							<div class="col-sm-10">
								<input type="text" v-model.trim="model.userNick" class="form-control" required="true">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">性别</label>
							<div class="col-sm-10">
								<el-radio-group v-model="model.sex">
									<el-radio label="0">男</el-radio>
									<el-radio label="1">女</el-radio>
								</el-radio-group>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">头像</label>
							<div class="col-sm-10">
								<img :src="model.poster" />
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">自我介绍</label>
							<div class="col-sm-10">
								<input type="text" v-model.trim="model.intr" class="form-control" required="true">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">手机号</label>
							<div class="col-sm-10">
								<input type="text" v-model.trim="model.telephone" class="form-control" required="true">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10">
								<input type="text" v-model.trim="model.email" class="form-control" required="true">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">微信</label>
							<div class="col-sm-10">
								<input type="text" v-model.trim="model.weixin" class="form-control" required="true">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">QQ</label>
							<div class="col-sm-10">
								<input type="text" v-model.trim="model.qq" class="form-control" required="true">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">是否可用</label>
							<div class="col-sm-10">
								<el-switch v-model="model.isEnabled" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
								 inactive-value="0">
								</el-switch>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">是否锁定</label>
							<div class="col-sm-10">
								<el-switch v-model="model.isLocked" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
								 inactive-value="0">
								</el-switch>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">角色</label>
							<div class="col-sm-10">
								<el-select v-model="model.roleIds" multiple placeholder="请选择">
									<el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">备注</label>
							<div class="col-sm-10">
								<input type="text" v-model.trim="model.remark" class="form-control" required="true">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">更新时间</label>
							<div class="col-sm-10">
								<p class="form-control-static"> {{ model.updateTime }} </p>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<div class="col-sm-10 col-sm-offset-2">
								<button type="button" class="btn btn-success" @click="submit()">提交</button>
							</div>
						</div>
					</form>
				</el-dialog>

			</section>
		</section>
	</section>

</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				dialogFormVisible: false,
				userList: [],
				total: 0, // 记录总条数
				pageSize: 10, // 每页显示条数
				pageNo: 1, // 当前的页数
				keywords: '',
				model: {},
				sexs: [],
				roleList: []
			}
		},
		mounted() {
			this.$api.sysDict.queryDictItems("sex").then(data => {
				this.sexs = data;
			});

			//加载角色
			this.$api.role.list().then(data => {
				this.roleList = data;
			});

			//用户分页查询
			this.query(1);


		},
		methods: {
			indexMethod(index) {
				return this.pageSize * (this.pageNo - 1) + index + 1;
			},
			submit() {
				if (this.model.id == null) {
					this.$api.user.add(this.model).then(data => {
						this.model.id = data.id;
						this.query(1);
					});
				} else {
					this.$api.user.update(this.model);
				}
				this.dialogFormVisible = false;
			},
			query(pageNo) {
				this.pageNo = null == pageNo ? 1 : pageNo;
				this.$api.user.query({
					userNick: this.keywords,
					pageSize: this.pageSize,
					pageNo: this.pageNo,
					parentCode: 0
				}).then(data => {
					this.userList = data.rows;
					this.pageNo = data.pageNo;
					if (1 == this.pageNo) {
						this.total = data.total;
					}
				});
			},
			editUser(model) {
				this.$api.user.queryById(model.id).then(data => {
					this.model = data;
					this.dialogFormVisible = true;
				});
			},
			deleteUser(id) {
				this.$confirm('您确定要执行删除操作吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$api.user.delete(id).then(data => {
						this.query(this.pageNo);
					});
				});
			},
			formatterSex(row, column, cellValue, index) {
				return this.parseSysDict(cellValue, this.sexs);
			},
			parseSysDict(key, data) {
				// console.debug('filter key:', key);
				var name = "其他";
				// console.debug('data:', data);
				for (let i = 0; i < data.length; i++) {
					// console.debug('data[i].code:', data[i].code);
					if (data[i].code == key) {
						name = data[i].name;
						// console.debug('name:', name);
						break;
					}
				}
				// console.debug('filter name:', name);
				return name;
			}
		}
	}
</script>

<style>
</style>
